<template>
	<view class="seckillBox">
		<view class="bgBox"></view>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" :autoplay="false" >
					<swiper-item v-for="(row, index) in swiperList" :key="row.id">
						<!-- <image :src="row.img" @tap="toSwiper(swiper)"></image> -->
						<view class="itemCard">
							<view class="item-head">
								<image src="../../static/img/goodsInfo/banjiaqiang.png" mode="widthFix" class="banjia"></image>
								<view class="right">
									<uni-countdown
										v-if="row.status"
										color="#FFFFFF"
										background-color="#f13342"
										:show-day="false"
										:hour="row.hour"
										:minute="row.minute"
										:second="row.second"
										@timeup="seckillUpdata"
									></uni-countdown>
									<view v-if="!row.status" class="next">
										预计今天
										<text>{{ row.startTime }}点</text>
										开抢
									</view>
								</view>
							</view>
							<!-- 每日上新 -->
							<view class="today-list">
								<image :src="row.img" mode="widthFix"></image>
								<view class="plank">
									<view class="title">{{ row.title }}</view>
									<text class="cont">{{ row.cont }}</text>
									<view class="tags">
										<view v-for="(val, index2) in row.tags" :key="index2" class="tag">{{ val }}</view>
									</view>
									<view class="footer">
										<!-- <view class="price">
											<text>¥</text>
											{{ row.price }}
										</view> -->
										<view class="left">
											<view class="price">¥ {{ row.price }}</view>
											<view class="oldPrice">¥{{ row.oldPrice }}</view>
										</view>
										<view class="right" :class="row.status == true ? 'on' : ''">
											<view v-if="row.status" class="goBuy">立即抢购</view>
											<view v-if="!row.status" class="remind">
												提醒我
												<uni-icons type="chat" size="12" color="#fff"></uni-icons>
											</view>
											<view v-if="!row.status" class="subscribe">1284人预约</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- tab列表 -->
		<scroll-view scroll-with-animation scroll-x class="topTabBar" @scroll="scrollMove" :scroll-left="scrollLeft">
			<view class="innerBox">
				<view class="grid" :class="[tbIndex == tabbarIndex ? 'on' : '']" v-for="(item, tbIndex) in tabType" :key="tbIndex" :id="'ele' + tbIndex" @tap="showType(tbIndex)">
					<view class="text">{{ item.title }}</view>
					<view class="cont">{{ item.cont }}</view>
				</view>
			</view>
		</scroll-view>
		<!-- 商品列表 -->
		<swiper :autoplay="false" :current="currentSwiper" class="swiperBox" :style="{ height: pageHeight + 'px' }" @change="listChange">
			
			<swiper-item class="swiperItem" v-for="(item, num) in goodsList" :key="num">
				<view v-if="!item.list||item.list.length<1" class="nodata">
					没有数据～
				</view>
				<view class="today-list" v-for="(row, index) in item.list" :key="index">
					<image :src="row.img" mode="widthFix"></image>
					<view class="plank">
						<view class="title">{{ row.title }}</view>
						<text class="cont">{{ row.cont }}</text>
						<view class="tags">
							<progress active :percent="row.percent" backgroundColor="#f9d8ca" activeColor="#ec6830" stroke-width="14" border-radius="10" />
							<view class="hint">已售{{ row.percent }}%</view>
						</view>
						<view class="footer">
							<view class="price">
								<text>¥</text>
								{{ row.price }}
								<text class="oldPrice">¥{{ row.oldPrice }}</text>
							</view>
							<view v-if="item.status=='end'" class="seeBtn" @click="goGoodsInfo(row.id)">去看看</view>
							<view v-if="item.status=='stare'" class="seeBtn now" @click="goGoodsInfo(row.id)">立即抢</view>
							<view v-if="item.status=='next'" class="seeBtn after" @click="goGoodsInfo(row.id)">提醒我</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageHeight: 200,
			currentSwiper:0,
			scrollLeft: '',
			moveParams: {
				scrollLeft: 0, // scroll-view滚动的距离,默认为0,因为没有触发滚动
				subLeft: '', //点击元素距离屏幕左边的距离
				subHalfWidth: '', //点击元素的宽度一半
				screenHalfWidth: '' //屏幕宽度的一半
			},
			tabType: [
				{
					title: '09:00',
					cont: '已结束'
				},
				{
					title: '12:00',
					cont: '已结束'
				},
				{
					title: '14:00',
					cont: '已结束'
				},
				{
					title: '16:00',
					cont: '已结束'
				},
				{
					title: '18:00',
					cont: '抢购中'
				},
				{
					title: '21:00',
					cont: '即将开始'
				}
			],
			tabbarIndex: 0,
			swiperList: [
				{
					id: 1,
					src: 'url1',
					status: true,
					startTime: 12,
					hour: 0,
					minute: 0,
					second: 60,
					img: '/static/img/goods/p1.jpg',
					title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
					cont: '高颜值设计，智能米家APP智联高颜值设计，智能高颜值设计，智能高颜值设计，智能',
					tags: ['前100件5折'],
					price: '1999',
					oldPrice: '2399'
				},
				{
					id: 2,
					src: 'url2',
					status: false,
					startTime: 21,
					hour: 0,
					minute: 0,
					second: 60,
					img: '/static/img/goods/p2.jpg',
					title: '席梦思真皮沙发',
					cont: '高端家具量身打造',
					tags: ['前100件5折'],
					price: '1999',
					oldPrice: '2399'
				},
				{
					id: 3,
					src: 'url3',
					status: false,
					startTime: 18,
					hour: 0,
					minute: 0,
					second: 60,
					img: '/static/img/goods/p3.jpg',
					title: '席梦思真皮沙发',
					cont: '高端家具量身打造',
					tags: ['前100件5折'],
					price: '1999',
					oldPrice: '2399'
				}
			],

			goodsList: [
				{
					status: 'end',
					list: [
						{
							img: '/static/img/goods/p1.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联高颜值设计，智能高颜值设计，智能高颜值设计，智能',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							percent: '52'
						},
						{
							img: '/static/img/goods/p2.jpg',
							title: '小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '2999',
							oldPrice: '2399',
							percent: '32'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							percent: '62'
						},
						{
							img: '/static/img/goods/p4.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '999',
							oldPrice: '2399',
							percent: '82'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							percent: '12'
						},
						{
							img: '/static/img/goods/p4.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '999'
						}
					]
				},
				{
					status: 'stare',
					list: [
						{
							img: '/static/img/goods/p1.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联高颜值设计，智能高颜值设计，智能高颜值设计，智能',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							percent: '52'
						},
						{
							img: '/static/img/goods/p2.jpg',
							title: '小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '2999',
							oldPrice: '2399',
							percent: '32'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							percent: '62'
						},
						{
							img: '/static/img/goods/p4.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '999',
							oldPrice: '2399',
							percent: '82'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							percent: '12'
						},
						{
							img: '/static/img/goods/p4.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '999'
						}
					]
				},
				{
					status:'next',
					list: [
						{
							img: '/static/img/goods/p1.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联高颜值设计，智能高颜值设计，智能高颜值设计，智能',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							percent: '52'
						},
						{
							img: '/static/img/goods/p2.jpg',
							title: '小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '2999',
							oldPrice: '2399',
							percent: '32'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							percent: '62'
						},
						{
							img: '/static/img/goods/p4.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '999',
							oldPrice: '2399',
							percent: '82'
						},
						{
							img: '/static/img/goods/p3.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							tags: ['预售'],
							price: '1999',
							oldPrice: '2399',
							percent: '12'
						},
						{
							img: '/static/img/goods/p4.jpg',
							title: '小米电动滑板车1S小米电动滑板车1S小米电动滑板车1S',
							cont: '高颜值设计，智能米家APP智联',
							price: '999'
						}
					]
				},
				{},
				{},
				{},
			]
		};
	},
	onLoad: function(option) {
		//option为object类型，会序列化上个页面传递的参数
		console.log(option.cid); //打印出上个页面传递的参数。
		uni.setNavigationBarTitle({
			title: option.name8
		});
		console.log(option);
	},

	onReady() {
		// 获取屏幕宽度/高度
		this.getScreenWidth();
	},
	methods: {
		// 倒计时结束
		seckillUpdata() {
			// 请求数据
			this.countdown.hour = 6;
			this.countdown.minute = 6;
			this.countdown.second = 6;
		},
		getScreenWidth() {
			var that = this;
			uni.getSystemInfo({
				success(res) {
					console.log(res);
					let moveParams = that.moveParams;
					moveParams.screenHalfWidth = res.screenWidth / 2;
					that.pageHeight = res.windowHeight - 70;
				}
			});
		},
		getRect(ele) {
			//获取点击元素的信息,ele为传入的id
			var that = this;
			uni
				.createSelectorQuery()
				.select(ele)
				.boundingClientRect(function(rect) {
					let moveParams = that.moveParams;
					moveParams.subLeft = rect.left;
					moveParams.subHalfWidth = rect.width / 2;
					that.moveTo();
				})
				.exec();
		},
		scrollMove(e) {
			let moveParams = this.moveParams;
			moveParams.scrollLeft = e.detail.scrollLeft;
			this.moveParams = moveParams;
		},
		moveTo() {
			let subLeft = this.moveParams.subLeft;
			let screenHalfWidth = this.moveParams.screenHalfWidth;
			let subHalfWidth = this.moveParams.subHalfWidth;
			let scrollLeft = this.moveParams.scrollLeft;
			let distance = subLeft - screenHalfWidth + subHalfWidth;
			scrollLeft = scrollLeft + distance;
			this.scrollLeft = scrollLeft;
		},
		// tab切换
		showType(tbIndex) {
			this.tabbarIndex = tbIndex;
			let ele = 'ele' + tbIndex;
			this.getRect('#' + ele);
			// this.list = this.orderList[tbIndex];
			this.currentSwiper = tbIndex
		},
		listChange(event) {
			let newIndex = event.detail.current;
			this.currentSwiper = newIndex
			this.showType(newIndex)
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f4f4f4;
}
.bgBox {
	position: absolute;
	top: -10upx;
	background-color: #e47540;
	background-image: linear-gradient(to bottom, #e47540, #e66025);
	width: 100%;
	height: 480upx;
	border-radius: 0 0 50upx 50upx;
}
.seckillBox {
	.swiper {
		width: 100%;
		margin-top: 10upx;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 100%;
			height: 50vw;
			position: relative;
			z-index: 1;
			swiper {
				width: 100%;
				height: 50vw;
				swiper-item {
					width: 90% !important;
					height: 100%;
					padding: 0 28upx;
					box-sizing: border-box;
					overflow: hidden;
					// image {
					// 	width: 100%;
					// 	height: 50vw;
					// 	border-radius: 10upx;
					// }
					.itemCard {
						background-color: #fff;
						border-radius: 20upx;
						padding: 20upx;
						.item-head {
							display: flex;
							align-items: center;
							.banjia {
								width: 150upx;
							}
							.right {
								margin-left: auto;
								.next {
									font-size: 28upx;
									color: #666;
									text {
										color: #ff0013;
									}
								}
							}
						}
						.today-list {
							display: flex;
							margin-bottom: 20upx;
							&:last-child {
								margin-bottom: 0upx;
							}
							image {
								width: 220upx;
								height: 220upx;
								flex-shrink: 0;
								display: block;
								border-radius: 20upx;
							}
							.plank {
								flex-grow: 1;
								display: flex;
								flex-direction: column;
								// justify-content: space-between;
								height: 220upx;
								margin-left: 20upx;
								overflow: hidden;
								.title {
									font-size: 30upx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								.cont {
									display: inline-block;
									min-width: 10upx;
									color: #666;
									font-size: 28upx;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								.tags {
									display: flex;
									.tag {
										color: #fff;
										text-align: center;
										padding: 0 10upx;
										flex-shrink: 0;
										margin: 5upx;
										flex-grow: 0;
										color: #cc463c;
										border: 1upx solid #cc463c;
										font-size: 20upx;
										border-radius: 5upx;
									}
								}
								.footer {
									margin-top: auto;
									border-radius: 50upx;
									// border: 1upx solid #ff9b2b;
									width: 340upx;
									height: 80upx;
									overflow: hidden;
									display: flex;

									.left {
										flex: 0.9;
										flex-grow: 1;
										background-color: #fbf1bb;
										display: flex;
										flex-direction: column;
										align-items: center;
										justify-content: center;
										position: relative;
										&::before {
											position: absolute;
											top: 0;
											right: -68upx;
											content: '';
											background-color: fbf1bb;
											border-left: 30upx solid #fbf1bb;
											border-top: 40upx solid transparent;
											border-bottom: 45upx solid transparent;
											border-right: 40upx solid transparent;
										}
										.price {
											color: #ff0000;
											font-size: 34upx;
										}
										.oldPrice {
											text-decoration: line-through;
											color: #666;
											font-size: 28upx;
										}
									}
									.right {
										flex: 1.1;
										display: flex;
										flex-direction: column;
										align-items: center;
										justify-content: center;
										background-color: #58b39b;
										padding-left: 30upx;
										&.on {
											background-color: #ff0025;
										}
										.goBuy {
											font-size: 36upx;
											color: #fff;
										}
										.remind {
											font-size: 30upx;
											color: #fff;
										}
										.subscribe {
											font-size: 26upx;
											color: #eeeaf1;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
// tab切换
.topTabBar {
	width: 95%;
	margin: 0upx auto;
	// background-color: #fff;
	height: 100upx;
	display: flex;
	overflow: auto;
	.innerBox {
		display: flex;
		.grid {
			flex: 1;
			min-width: 20%;
			height: 90upx;
			font-size: 30upx;
			text-align: center;
			flex-shrink: 0;
			transition: all 0.2s ease;
			color: #fff;
			opacity: 0.6;
			.text {
				height: 40upx;
				line-height: 40upx;
			}
			.cont {
				font-size: 24upx;
			}
			&.on {
				font-size: 36upx;
				font-weight: bold;
				color: #fff;
				opacity: 1;
				.cont {
					font-size: 24upx;
					border-radius: 20upx;
					background-color: #f0aa1d;
				}
			}
		}
	}
}

// 列表展示
.swiperBox {
	margin: 20upx;
	.swiperItem {
		// background-color: #fff;
		// padding: 20upx;
		overflow: auto;
		.nodata {
			margin-top: 50upx;
			text-align: center;
		}
		.today-list {
			display: flex;
			margin-bottom: 20upx;
			background-color: #fff;
			padding: 20upx;
			border-radius: 20upx;
			&:last-child {
				margin-bottom: 0upx;
			}
			image {
				width: 220upx;
				height: 220upx;
				flex-shrink: 0;
				display: block;
				border-radius: 20upx;
			}
			.plank {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
				height: 220upx;
				margin-left: 20upx;
				overflow: hidden;
				.title {
					font-size: 36upx;
					font-weight: bold;
					margin-bottom: 10upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.cont {
					display: inline-block;
					min-width: 10upx;
					color: #666;
					font-size: 28upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.tags {
					position: relative;
					width: 300upx;
					.hint {
						font-size: 24upx;
						color: #fff;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 20upx;
					}
				}
				.footer {
					margin-top: auto;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price {
						font-size: 38upx;
						font-weight: bold;
						color: #ff0000;
						text {
							font-size: 28upx;
							font-weight: 400;
						}
						.oldPrice {
							margin-left: 20upx;
							color: #999;
							text-decoration: line-through;
							font-size: 30upx;
						}
					}
					.seeBtn {
						font-size: 26upx;
						border: 1upx solid #da5635;
						padding: 5upx 20upx;
						border-radius: 50upx;
						color: #da5635;
						&.now {
							border: 1upx solid #e55633;
							color: #fff;
							background-color: #e55633;
						}
						&.after {
							border: 1upx solid #4ba68d;
							color: #4ba68d;
						}
					}
				}
			}
		}
	}
}
</style>
